<template>
  <div class="custom">
    <TablePage :query="query" :columns="columns" :data="data" @onLoad="onload" addbtn @onAdd="handlerAdd"/>


      <AdDetail  ref="detail" @close="()=>{this.onload(this.data)}"/>

  </div>
</template>
<script>
import TablePage from "@/components/TablePage";
import {parseTime} from "@/utils";
import {activityStatus, activityStatuses} from "@/utils/shopkeeper";
import AdDetail from "@/views/activity/components/AdDetail.vue";

export default {
  components: {AdDetail, TablePage},
  data() {
    return {
      query: [
        {
          type: 'select',
          label: '状态',
          placeholder: '选择状态',
          key: 'status',
          options: activityStatuses
        },
      ],
      columns: [
        {
          label: '#',
          prop: '$index',
          width: '80px'
        },

        {
          label: '广告备注',
          prop: 'title',
          width: '180px'
        },
        {
          label: '广告状态',
          type: 'render',
          width: '100px',
          render: (data) => {
            return activityStatus(data.status)
          },
        },
        {
          label: '广告时间',
          type: 'render',
          width: '330px',
          render: (data) => {
            return `${parseTime(data.startTime)}~${parseTime(data.endTime)}`;
          },
        },

        {
          label: '添加时间',
          type: 'render',
          width: '180px',
          render: (data) => {
            return parseTime(data.created);
          },
        }, {
          label: '操作',
          type: 'buttons',
          width: '100px',
          fixed: true,
          buttons: [
            {
              label: '编辑',
              type: 'primary',
              styles: {},
              icon: 'Edit',
              callback: (data) => {
                this.$refs.detail.getDetail(data.id)
              }
            }
          ]
        }
      ],
      data: {
        total: 0,
        list: [],
        page: 1,
        size: 40
      },
      form: {},
    }
  },
  created() {

  },


  methods: {
    onload(data) {
      this.data.page = data.page;
      this.data.size = data.size;
      Object.assign(data, {
        direction: 'DESC',
        properties: ['id']
      })
      this.$api.apiQuery('/api/manage/activity-home-ad/', data).then(res => {
        this.data.list = res.data;
        this.data.total = res.total;
      })
    },
    handlerAdd() {
      this.$refs.detail.getDetail()
    },


  }
}
</script>

<style scoped lang="scss">

</style>